<template>
  <el-container style="height: 100%">
    <!-- 侧边栏 -->
    <el-aside width="250px" class="sidebar">
      <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/residents">居民信息</el-menu-item>
        <el-menu-item index="/houses">房屋信息</el-menu-item>
        <el-menu-item index="/properties">物业管理</el-menu-item>
        <el-menu-item index="/complaints">投诉建议</el-menu-item>
        <el-menu-item index="/activities">社区活动</el-menu-item>
        <el-menu-item index="/system">系统管理</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容区域 -->
    <el-main>
      <el-row class="content" justify="center" style="margin-top: 20px">
        <el-col :span="18">
          <el-card>
            <div class="header">
              <h3>物业管理</h3>
              <el-button type="primary" @click="openAddDeviceDialog">添加设备</el-button>
              <el-button type="primary" @click="openAddFeeDialog">添加费用</el-button>
            </div>

            <el-tabs v-model="activeTab">
              <el-tab-pane label="设备管理" name="device">
                <el-table :data="devices" stripe>
                  <el-table-column prop="id" label="ID" width="80"></el-table-column>
                  <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
                  <el-table-column prop="deviceType" label="设备类型" width="150"></el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="text" @click="openEditDeviceDialog(scope.row)"
                        >编辑</el-button
                      >
                      <el-button type="text" @click="deleteDevice(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="费用管理" name="fee">
                <el-table :data="fees" stripe>
                  <el-table-column prop="id" label="ID" width="80"></el-table-column>
                  <el-table-column prop="feeName" label="费用名称" width="150"></el-table-column>
                  <el-table-column prop="amount" label="费用金额" width="150"></el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="text" @click="openEditFeeDialog(scope.row)">编辑</el-button>
                      <el-button type="text" @click="deleteFee(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>

            <!-- 添加设备弹窗 -->
            <el-dialog title="添加设备" :visible.sync="addDeviceDialogVisible">
              <el-form :model="newDevice" ref="addDeviceForm">
                <el-form-item label="设备名称" :label-width="'100px'">
                  <el-input v-model="newDevice.deviceName" placeholder="请输入设备名称"></el-input>
                </el-form-item>
                <el-form-item label="设备类型" :label-width="'100px'">
                  <el-input v-model="newDevice.deviceType" placeholder="请输入设备类型"></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="addDeviceDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAddDevice">确认</el-button>
              </div>
            </el-dialog>

            <!-- 编辑设备弹窗 -->
            <el-dialog title="编辑设备" :visible.sync="editDeviceDialogVisible">
              <el-form :model="currentDevice" ref="editDeviceForm">
                <el-form-item label="设备名称" :label-width="'100px'">
                  <el-input
                    v-model="currentDevice.deviceName"
                    placeholder="请输入设备名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="设备类型" :label-width="'100px'">
                  <el-input
                    v-model="currentDevice.deviceType"
                    placeholder="请输入设备类型"
                  ></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="editDeviceDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitEditDevice">确认</el-button>
              </div>
            </el-dialog>

            <!-- 添加费用弹窗 -->
            <el-dialog title="添加费用" :visible.sync="addFeeDialogVisible">
              <el-form :model="newFee" ref="addFeeForm">
                <el-form-item label="费用名称" :label-width="'100px'">
                  <el-input v-model="newFee.feeName" placeholder="请输入费用名称"></el-input>
                </el-form-item>
                <el-form-item label="费用金额" :label-width="'100px'">
                  <el-input
                    v-model="newFee.amount"
                    type="number"
                    placeholder="请输入费用金额"
                  ></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="addFeeDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAddFee">确认</el-button>
              </div>
            </el-dialog>

            <!-- 编辑费用弹窗 -->
            <el-dialog title="编辑费用" :visible.sync="editFeeDialogVisible">
              <el-form :model="currentFee" ref="editFeeForm">
                <el-form-item label="费用名称" :label-width="'100px'">
                  <el-input v-model="currentFee.feeName" placeholder="请输入费用名称"></el-input>
                </el-form-item>
                <el-form-item label="费用金额" :label-width="'100px'">
                  <el-input
                    v-model="currentFee.amount"
                    type="number"
                    placeholder="请输入费用金额"
                  ></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="editFeeDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitEditFee">确认</el-button>
              </div>
            </el-dialog>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  ElContainer,
  ElAside,
  ElMenu,
  ElMenuItem,
  ElMain,
  ElRow,
  ElCol,
  ElButton,
  ElCard,
  ElTable,
  ElTableColumn,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElTabs,
  ElTabPane,
} from 'element-plus'
import {
  getAllDevices,
  getAllFees,
  addDevice,
  updateDevice,
  deleteDevice as del,
  addFee,
  updateFee,
  deleteFee as delFee,
} from '@/utils/axios'

const activeMenu = ref('/properties')
const activeTab = ref('device')
const devices = ref([])
const fees = ref([])
const addDeviceDialogVisible = ref(false)
const addFeeDialogVisible = ref(false)
const editDeviceDialogVisible = ref(false)
const editFeeDialogVisible = ref(false)
const newDevice = ref({
  deviceName: '',
  deviceType: '',
})
const currentDevice = ref({
  id: null,
  deviceName: '',
  deviceType: '',
})
const newFee = ref({
  feeName: '',
  amount: '',
})
const currentFee = ref({
  id: null,
  feeName: '',
  amount: '',
})

// 获取设备数据
const loadDevices = async () => {
  const response = await getAllDevices()
  devices.value = response
}

// 获取费用数据
const loadFees = async () => {
  const response = await getAllFees()
  fees.value = response
}

// 打开添加设备弹窗
const openAddDeviceDialog = () => {
  newDevice.value = {
    deviceName: '',
    deviceType: '',
  }
  addDeviceDialogVisible.value = true
}

// 提交新增设备信息
const submitAddDevice = async () => {
  await addDevice(newDevice.value)
  addDeviceDialogVisible.value = false
  loadDevices()
}

// 打开编辑设备弹窗
const openEditDeviceDialog = (device) => {
  currentDevice.value = { ...device }
  editDeviceDialogVisible.value = true
}

// 提交编辑设备信息
const submitEditDevice = async () => {
  await updateDevice(currentDevice.value.id, currentDevice.value)
  editDeviceDialogVisible.value = false
  loadDevices()
}

// 删除设备
const deleteDevice = async (id) => {
  await del(id)
  loadDevices()
}

// 打开添加费用弹窗
const openAddFeeDialog = () => {
  newFee.value = {
    feeName: '',
    amount: '',
  }
  addFeeDialogVisible.value = true
}

// 提交新增费用信息
const submitAddFee = async () => {
  await addFee(newFee.value)
  addFeeDialogVisible.value = false
  loadFees()
}

// 打开编辑费用弹窗
const openEditFeeDialog = (fee) => {
  currentFee.value = { ...fee }
  editFeeDialogVisible.value = true
}

// 提交编辑费用信息
const submitEditFee = async () => {
  await updateFee(currentFee.value.id, currentFee.value)
  editFeeDialogVisible.value = false
  loadFees()
}

// 删除费用
const deleteFee = async (id) => {
  await delFee(id)
  loadFees()
}

onMounted(() => {
  loadDevices()
  loadFees()
})
</script>

<style scoped>
.content {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.el-button {
  margin-left: 10px;
}

.el-dialog {
  width: 400px;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>
